<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>icon 图标集合</title>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="/layer-v3.2.0/layer/layer.js"></script>
    <script src="/axios.min.js"></script>
</head>
<body>

<input type="file" class="fileInput" style="display: none;"/>
<button id="upload">上传</button>
<h1>icon 图标集合</h1>

<ul style="list-style: none;display: flex;flex-wrap: wrap;">
    <% dirs.forEach(function(item){%>
    <li style="margin-right: 20px;margin-bottom: 30px;text-align: center;cursor:pointer;background: #110e31;padding: 10px;"
        class="icon">
        <img src="/icon/<%=item %>" alt="" style="width: 50px;height: 50px;"/>
        <div class="name" style="padding-top: 5px;padding-bottom: 5px;width: 120px;overflow: hidden;color: #fff;">
            <%=item %>
        </div>
    </li>
    <% }) %>
</ul>
<input type class="hide" id="input_copy_txt_to_board" value="" hidden/>

<script>
    $(function () {
        //复制文件名称
        function copy(value) {
            // for ie
            if (window.clipboardData) {
                window.clipboardData.clearData();
                window.clipboardData.setData('text', value);
            }
// for modern browser
            else if (document.execCommand) {
                var element = document.createElement('SPAN');
                element.textContent = value;
                document.body.appendChild(element);
                if (document.selection) {
                    var range = document.body.createTextRange();
                    range.moveToElementText(element);
                    range.select();
                } else if (window.getSelection) {
                    var range = document.createRange();
                    range.selectNode(element);
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(range);
                }
                document.execCommand('copy');
                element.remove ? element.remove() : element.removeNode(true);
            }
        }

        function copyText(target) {
            var txt = $(target).text().trim();
            $("#input_copy_txt_to_board").val(txt);//赋值
            $("#input_copy_txt_to_board").removeClass("hide");//显示
            $("#input_copy_txt_to_board").focus();//取得焦点
            $("#input_copy_txt_to_board").select();//选择

            var value = "<%=host_name %>/icon/" + txt;
            layer.msg(`<a href="${value}" target="_blank">${value}</a> 复制成功`)
            copy(value);
            $("#input_copy_txt_to_board").addClass("hide");//隐藏
        }

        $('.icon').click((e) => {
            copyText($(e.currentTarget).find('.name')[0])

        })


        function uploadFileAjax(file) {
            var formData = new FormData();
            var fileName = file.filename;
            formData.append('file', file, fileName);
            return axios.post(`/api/uploadImage`, formData, {
                headers: {'Content-Type': 'multipart/form-data'}
            }).then(res => res.data)
        }

        function isContainChinese(str){
            var isChinese=false
            var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(str)){isChinese=true}
            return isChinese
        }
        function isImageFile(str){
            var isTrue=/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(str)
            return isTrue
        }
        $('.fileInput').change(e=>{
            var file=e.target.files[0]
            if(!file){
                return false
            }
            var fileName=file.name
            if(!isImageFile(fileName)){
                layer.msg(`文件格式请使用【gif|jpg|jpeg|png|gif|jpg|png】`,{icon:3});
                return false
            }
            if(isContainChinese(fileName)){
                layer.msg(`【${fileName}】包含中文，请使用纯英文非特殊符号命名`,{icon:3});
                return false
            }
            var fileSize=file.size; //文件必须小于1m
            if(fileSize>1024 * 1024 *1){
                layer.msg(`【${fileName}】文件不能大于1M`,{icon:3});
                return false
            }
            var index = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            uploadFileAjax(file).then(res=>{
                //文件上传成功
                layer.closeAll()
                if(res.code==0){
                    layer.msg(`文件上传成功`);
                    //重新刷新界面
                    setTimeout(()=>{
                        location.href="/"
                    },500)
                }else{
                    e.value=null;
                    layer.msg(res.msg||`文件上传失败`,{icon:5});
                }
            })


        })
        $('#upload').click(e => {
            $('.fileInput').click()
        })
    })

</script>

</body>
</html>
